<template>
    <div class="right">
        <el-row>
            <el-col :span='7' class="jsp-left">
               <el-tabs>
                   <el-tab-pane label='点餐'>
                       <el-table :data="tableData" >
                           <el-table-column prop='goodsName' label="商品名称"></el-table-column>
                           <el-table-column prop='count' label="数量" width='50'></el-table-column>
                           <el-table-column prop='price' label="金额" width='70'></el-table-column>
                           <el-table-column label="操作" width='100' fixed='right'>
                               <template :scope="scope">
                                   <el-button type="text" size="small">删除</el-button>
                                   <el-button type="text" size="small">添加</el-button>
                               </template>
                           </el-table-column>
                       </el-table>
                       <div class="btn">
                           <el-button type='warning'>挂单</el-button>
                           <el-button type='danger'>删除</el-button>
                           <el-button type='success'>结账</el-button>
                       </div>
                   </el-tab-pane>
                   <el-tab-pane label='挂单'>

                   </el-tab-pane>
                   <el-tab-pane label='外卖'>

                   </el-tab-pane>
               </el-tabs> 
               
                
            </el-col>
            <el-col :span='17'>
                 <div class="right_top">
                     <div class="right_title">
                         常用商品
                     </div>
                     <div class="right_content">
                         <ul>
                             <li v-for="(list,index) in shanpin" :key="index" @click="addorderlist(list)">
                                 <!-- 谁给解决一下点击后 获取不到tableData这个数组的问题
                                  -->
                                 <span>{{list.goodsName}}</span>
                                 <span>￥{{list.price}}</span>
                            </li>
                         </ul>
                     </div>
                 </div>
                 <div class="goods-type">
                     <el-tabs>
                         <el-tab-pane label="汉堡">
                             <ul class="shanpinlist">
                                 <li v-for="(itme,index) in type0Goods" :key="index">
                                     <img :src=itme.goodsImg alt="">
                                     <p>{{itme.goodsName}}</p>
                                     <p>￥{{itme.price}}</p>
                                 </li>
                             </ul>
                         </el-tab-pane>
                          <el-tab-pane label="小食">
                             <ul class="shanpinlist">
                                 <li v-for="(itme,index) in type1Goods" :key="index">
                                     <img :src=itme.goodsImg alt="">
                                     <p>{{itme.goodsName}}</p>
                                     <p>￥{{itme.price}}</p>
                                 </li>
                             </ul>
                         </el-tab-pane>
                          <el-tab-pane label="饮料">
                             <ul class="shanpinlist">
                                 <li v-for="(itme,index) in type2Goods" :key="index">
                                     <img :src=itme.goodsImg alt="">
                                     <p>{{itme.goodsName}}</p>
                                     <p>￥{{itme.price}}</p>
                                 </li>
                             </ul>
                         </el-tab-pane>
                          <el-tab-pane label="套餐">
                             <ul class="shanpinlist">
                                 <li v-for="(itme,index) in type3Goods" :key="index">
                                     <img :src=itme.goodsImg alt="">
                                     <p>{{itme.goodsName}}</p>
                                     <p>￥{{itme.price}}</p>
                                 </li>
                             </ul>
                         </el-tab-pane>
                     </el-tabs>
                 </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'jsp',
    data(){
        return{
            tableData:[],
            shanpin:[],
            type0Goods:[],
            type1Goods:[],
            type2Goods:[],
            type3Goods:[],
        }
    },
    created(){
        axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods')
        .then(res=>{
            console.log(res)
            this.shanpin=res.data
        })
        .catch(error=>{
            console.log(error)
        })
        axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods')
        .then(res=>{
            console.log(res)
            this.type0Goods=res.data[0];
            this.type1Goods=res.data[1];
            this.type2Goods=res.data[2];
            this.type3Goods=res.data[3];
        })
        .catch(error=>{
            console.log(error)
        })
    },
    methods:{
        addorderlist(goods){
            let isHive=false;
            for(let i=0;i<this.tableData.length;i++){
                if(this.tableData[i]==goods.goodsId){
                    isHive=true;
                }
            }
            if(isHive){
                let arr =this.tableData.filter(o=>o.goodsId == goods.goodsId);
                arr[0].count++
            }else{
                let newgoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
                this.tableData.push(newgoods);
                console.log(newgoods)
            }
        }
    }
}
</script>


<style scoped>
    .right{
        text-align: center;
    }
    .jsp-left{
        background: #f9fafc;
        border-right: 1px solid rgb(150, 165, 172);
        height: 10000px;
    }
    .tabs{
        width: 100%;
    }
    .btn{
        padding: 20px;
    }
    .right_top{
        width: 100%;
    }
    .right_title{
        width: 100%;
        height: 20px;
        border-bottom: 1px solid #d3dce6;
        background: #f9fafc;
        padding: 10px;
        text-align: left;
    }
    .right_content ul{
        padding: 0;
        margin: 0;
    }
    .right_content li{
        list-style: none;
        float: left;
        border:1px solid #333;
        padding: 10px;
        margin: 10px;
        background: #fff;
        border-radius: 10px;
    }
    .goods-type{
        clear: both;
    }
    .shanpinlist{
        padding: 0;
        margin: 0;
    }
    .shanpinlist li{
        padding: 10px;
        margin: 10px;
        list-style: none;
        float: left;
    }
</style>


